<template>
  <div class="wrapper">
    <van-dropdown-menu>
      <van-dropdown-item
        v-model="value1"
        :options="option1"
        title="综合"
        disabled
      />
      <van-dropdown-item
        v-model="value1"
        :options="option2"
        title="价格"
        @change="PriceChange"
      />
      <van-dropdown-item
        v-model="filterCategoryValue"
        :options="fliterCategroy"
        title="分类"
        @change="categroychange"
      />
    </van-dropdown-menu>
    <Products :goodsList="goodsList" v-if="goodsList.length>0" />
    <van-empty image="network" description="此搜索不存在" v-else />

  </div>
</template>

<script>
import Products from './Products.vue'
export default {
  props: {
    goodsList: {
      type: Array
    },
    fliterCategroy: {
      type: Array
    }
  },
  data() {
    return {
      value1: 0,
      filterCategoryValue: 0,
      option2: [
        { text: '价格由高到低', value: 'desc' },
        { text: '价格由低到高', value: 'asc' }
      ]
    }
  },
  components: {
    Products
  },
  methods: {
    categroychange(value) {
      this.$emit('categroychange', value)
    },
    PriceChange(value) {
      this.$emit('priceChange', value)
      console.log(value)
    }
  },
  created() {
    this.fliterCategroy.map(item => {
      console.log(item)
      if (item.checked) {
        this.filterCategoryValue = item.value
        console.log(item)
      }
    })
  }
}
</script>

<style lang="less" scoped></style>
